<template>
	<view class="content">
		<view class="title">欢迎登录运营端</view>
		<view class="tabs">
			<text :class="activeTabs == '0' ? 'active tab' : 'tab'" @click="tabsClick('0')">手机号登陆</text>
			<text class="icon">|</text>
			<text :class="activeTabs == '1' ? 'active tab' : 'tab'" @click="tabsClick('1')">账号登陆</text>
		</view>
		<view class="input">
			<image src="@/static/images/login_ic_shop.png" mode="widthFix" />
			<input type="text" placeholder="请输入商户编码" v-model="shopId" @blur="changeId" />
		</view>
		<view class="input">
			<image v-if="activeTabs == '0'" src="@/static/images/login_ic_phone.png" mode="widthFix" />
			<image v-else src="@/static/images/login_ic_account.png" mode="widthFix" />
			<input type="text" :placeholder="activeTabs == '0' ? '请输入手机号' : '请输入账号'" v-model="userName" />
		</view>
		<view class="input">
			<image src="@/static/images/login_ic_password.png" mode="widthFix" />
			<input type="password" placeholder="请输入密码" v-model="password" />
		</view>
		<view class="btn" @click="submit">登录</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				userInfo: {},
				userName: '',
				password: '',
				shopId: uni.getStorageSync('shopId'),
				activeTabs: '0',
				phone: uni.getStorageSync('phone') || null
			};
		},
		methods: {
			tabsClick(val) {
				this.activeTabs = val
			},
			changeId() {
				uni.setStorageSync('shopId', this.shopId)
			},
			submit() {
				if (!this.userName) return uni.showToast({
					title: '请输入账号',
					icon: 'none',
					duration: 2000
				})
				if (!this.password) return uni.showToast({
					title: '请输入密码',
					icon: 'none',
					duration: 2000
				})
				uni.setStorageSync('shopId', this.shopId)
				uni.removeStorageSync('GYMID');
				uni.removeStorageSync('venueName');
				this.$app.ajax({
					data: {
						param: {
							userName: this.userName,
							type: this.activeTabs == 1 ? '1' : null,
							password: this.password
						}
					},
					api: this.$api.login()
				}).then((res) => {
					if (res.errorCode != '000000') return
					uni.setStorageSync('userId', res.record.userId)
					uni.setStorageSync('nickName', res.record.userName)
					uni.showToast({
						title: '登录成功',
						icon: 'none',
						duration: 2000
					})
					setTimeout(() => {
						uni.redirectTo({
							url: '/pages/index/index'
						})
					}, 1000);
				}).catch(() => {})
			}
		}
	};
</script>

<style lang="scss">
	.content {
		padding: 100rpx 60rpx 0;
		box-sizing: border-box;
	}

	.tabs {
		display: flex;
		margin-bottom: 60rpx;
	}

	.tabs .tab {
		font-size: 30rpx;
		color: #666666;
	}

	.tabs .icon {
		color: #e5e5e5;
		margin: 0 40rpx;
	}

	.tabs .active {
		color: #000;
		font-weight: bolder;
	}

	.title {
		font-size: 56rpx;
		font-weight: 600;
		margin-bottom: 60rpx;
		color: #222222;
	}

	.input {
		width: 100%;
		height: 100rpx;
		border: none;
		background: #F7F7F7;
		border-radius: 50rpx;
		font-size: 30rpx;
		font-weight: 400;
		color: #222222;
		padding: 0 44rpx;
		box-sizing: border-box;
		margin-bottom: 40rpx;
		display: flex;
		align-items: center;
		input {
			border: none;
			background: none;
			outline: none;
		}
		image {
			width: 32rpx;
			height: 32rpx;
			margin-right: 20rpx;
		}
	}

	.btn {
		width: 100%;
		height: 100rpx;
		line-height: 100rpx;
		border: none;
		background: #4167c1;
		border-radius: 50rpx;
		font-size: 32rpx;
		font-weight: 400;
		color: #fff;
		box-sizing: border-box;
		text-align: center;
	}
</style>